<template>
  <div>
    <Header></Header>
    <div class="mui-content">
      <div class="deader_nav">
        <!--二级分类-->
        <div id="slider" class="mui-slider">
          <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <div class="mui-scroll top_nav">
              <span v-for="(item,i) in nav_list" :data-id="item.ptid" @click="nav_class(i)" :class="item.styles"
                    v-html="item.name"></span>
            </div>
          </div>
        </div>
        <!--三级分类-->
        <div id="slider2" class="mui-slider" v-show="conclass!=1">
          <div
            class="mui-scroll-wrapper mui-scroll-wrappers mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <div class="tab mui-scroll">
							<span v-for="(item,i) in nav_list_two" class="nav_two" :data-id="item.ptid" @click="nav_class_two(i)"
                    :class="item.styles"
                    v-html="item.name"></span>
            </div>
          </div>
        </div>
      </div>

      <!--内容-->
      <div class="con">
        <ul class="mui-table-view gd_list" v-if='conclass==0'>
          <li v-for="(item,i) in list_con">
            <!--<a :href="'xiangqing.html?id='+item.id+'&type='+conclass+'&status='+item.status+'&types=1'">-->
            <a @tap="onderurl('/home/modular/details',item.id,2,'',conclass,item.status,1)">
              <div class="l">
                <img :src="item.pic"/>
              </div>
              <div class="r">
                <p class="t" v-html="item.name"></p>
                <p class="t1" v-html="item.brief"></p>
                <div class="bottom">
                  <p class="ll time" v-html="item.createtime"></p>
                  <p class="ll browse">
                    <i></i>
                    <span v-html="item.scan"></span>
                  </p>
                  <p class="rr">
                    <i :class="item.no" @click="like(i)"></i>
                    <span>{{item.collectnum}}人收藏</span>
                  </p>
                </div>

              </div>
            </a>
          </li>
        </ul>
        <ul class="mui-table-view mui-grid-view mui-grid-9" v-if='conclass==1'>
          <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4" @tap="go_query_page('weather')">
            <img src="../../assets/images/query/model_icon/2.png" style="width: 100%;"/>
            <div class="mui-media-body">天气查询</div>
          </li>
          <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4" @tap="go_query_page('break')">
            <img src="../../assets/images/query/model_icon/1.png" style="width: 100%;"/>
            <div class="mui-media-body">违章查询</div>
          </li>
          <!--<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4" @tap="go_query_page('air_time')">-->
            <!--<img src="../../assets/images/query/model_icon/4.png" style="width: 100%;"/>-->
            <!--<div class="mui-media-body">机票时刻</div>-->
          <!--</li>-->
          <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4" @tap="go_query_page('air_price')">
            <img src="../../assets/images/query/model_icon/4.png" style="width: 100%;"/>
            <div class="mui-media-body">机票价格</div>
          </li>
          <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4" @tap="go_query_page('train')">
            <img src="../../assets/images/query/model_icon/3.png" style="width: 100%;"/>
            <div class="mui-media-body">火车查询</div>
          </li>
        </ul>
        <!--<div class="mk_form" v-if='conclass==2'>
                <form action="" method="post">
                    <p>
                        <label>申报名称：</label>
                        <input type="text" name="" id="" value="" />
                    </p>
                    <p>
                        <label>申报名称：</label>
                        <input type="text" name="" id="" value="" />
                    </p>
                    <p>
                        <label>申报名称：</label>
                        <input type="text" name="" id="" value="" />
                    </p>
                    <input type="submit" value="提交申报"/>
                </form>
            </div>-->
        <div class="bd_shipin" v-if='conclass==3'>
          <div class="bd_shipin_top" v-for="(item,i) in list_con">
            <a :href="'dj_shipinxq.html?id='+item.id+'&type='+conclass">
              <div class="bd_shipin_top_s">
                <div class="bd_top_s_img">
                  <img :src="item.img">
                </div>
                <div class="top_s_zi">
                  <h3 class="top_s_zi_h3">{{item.name}}</h3>
                  <div class="top_s_zi_all">
                    <div class="top_s_zi_time">视频时长：{{item.long}}</div>
                    <div class="top_s_zi_sc">
                      <i class="mui-icon-extra mui-icon-extra-heart" @click="like(i)"></i>
                      <span>{{item.collectnum}}人收藏</span>
                    </div>
                  </div>
                </div>
              </div>
            </a>
          </div>

        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import Header from '../../components/Header'

  export default {
    name: 'modular',
    data() {
      return {
        address: '',			//社区
        tid: '',
        nav_list: [],		//二级分类
        nav_list_two: [],	//三级分类
        conclass: '',		//内容板块
        list_con: [],		//数据
        query_type: null		// train 火车查询  air 飞机查询
      };
    },
    created() {

    },
    methods: {
      //初始化
      init: function () {
        mui.init({
          swipeBack: false
        });
        var options = {
          scrollY: false, //是否竖向滚动
          scrollX: true, //是否横向滚动
          startX: 0, //初始化时滚动至x
          startY: 0, //初始化时滚动至y
          indicators: false, //是否显示滚动条
          deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
          bounce: true //是否启用回弹
        }
        mui('.mui-scroll-wrapper').scroll(options);
        mui('.mui-scroll-wrappers').scroll(options);
      },
      go_query_page(type){
        console.log(type);
        this.$store.commit("updata_query_type",type)
        this.$router.push("/home/modular/query")
      },
      //二级分类
      nav_class: function (v) {
        let that = this;

        // 循环数据  设置选中样式为空，点击n 给n 添加样式  n 数据下索引0条数据添加状态
        for (var i = 0; i < that.nav_list.length; i++) {

          for (var j = 0; j < that.nav_list[i].sub.length; j++) {
            that.nav_list[i].sub[j].styles = ''
          }
          that.nav_list[i].styles = '';

        }
        if (this.nav_list[v].type == 'search') {
          console.log("查询");
          this.conclass = 1;
          that.nav_list[v].styles = 'active';
          return
        }
        that.nav_list[v].styles = 'active';
      //  console.log(that.nav_list[v].sub.length==0)
        if(that.nav_list[v].sub.length!=0){
          that.nav_list[v].sub[0].styles = 'active';

        }
        that.nav_list_two = that.nav_list[v].sub;
        that.$axios.get("api/article/getList/", {
          params: {
            id: that.address.sqid,
            uid: 3,
            cat1: that.tid,
            cat2: that.nav_list[v].ptid,
            cat3: that.nav_list_two[0].ptid,
            type: that.nav_list_two[0].type,
          }
        }).then(res => {
          var json = res.data;
          for (var i = 0; i < json.length; i++) {
            if (json[i].status == 0) {
              json[i].no = 'mui-icon-extra mui-icon-extra-heart';
            } else {
              json[i].no = 'mui-icon-extra mui-icon-extra-heart-filled';
            }
          }
          that.list_con = json;
          that.conclass = that.nav_list_two[0].type;
        })
      },
      //三级分类
      nav_class_two: function (v) {
        
        let that = this;
        var list = that.nav_list_two;			//三级数据
        mui.each(list, function (o, v) {
          v.styles = ''
        })
        list[v].styles = 'active';
        that.$axios.get("api/article/getList/", {
          params: {
            id: that.address.sqid,
            uid: 3,
            cat1: that.tid,
            cat2: that.nav_list_two[v].pid,
            cat3: that.nav_list_two[v].ptid,
            type: that.nav_list_two[v].type,
          }
        }).then(res => {
          var json = res.data;
          for (var i = 0; i < json.length; i++) {
            if (json[i].status == 0) {
              json[i].no = 'mui-icon-extra mui-icon-extra-heart';
            } else {
              json[i].no = 'mui-icon-extra mui-icon-extra-heart-filled';
            }
          }
          that.list_con = json;
          that.conclass = that.nav_list_two[0].type;
        })
        that.nav_list_two = list;
      },
      //跳转
      onderurl: function (url, val, type, name, conclass, status, source) {
        this.$host.onderurls(url, val, type, name, conclass, status, source)
      },
      select_city: function (o, j) {
        let that = this;
        that.$axios.get("address/addressList", {params: {uid: 3}}).then(res => {
          console.log(res)
          return false;
          that.now_areas = res
        });
      },
    },
    mounted() {
      let that = this;
      that.address = that.$store.state.account.community
      var tid = that.tid = that.$route.query.id;				//赋值tid
      that.init()
      //that.$route.query.type
      this.$store.commit("change_header", {
        header_text: that.$route.query.name,
        header_right_func: true,
        header_right_html: '',
        header_back_btn: true
      })

      that.$axios.get("api/article/getLists/tid/" + tid+"/bid/"+this.$store.state.account.community.sqid, {}).then(res => {
        var data = res.data.sub;
        if (tid == 130) {
          data.push({
            name: '便民查询',
            type: 'search',
            sub: []
          })
        }

        that.nav_list = data;
        console.log(that.nav_list);

        that.nav_list[0].styles = 'active';
        if (that.nav_list[0].sub.length != 0) {
          that.nav_list_two = that.nav_list[0].sub;
          
          that.nav_list_two[0].styles = 'active';

          that.$axios.get("api/article/getList/", {
            params: {
              id: that.address.sqid,
              uid: 3,
              cat1: that.tid,
              cat2: that.nav_list[0].ptid,
              cat3: that.nav_list_two[0].ptid,
              type: that.nav_list_two[0].type,
            }
          }).then(res => {
            var json = res.data
            for (var i = 0; i < json.length; i++) {
              if (json[i].status == 0) {
                json[i].no = 'mui-icon-extra mui-icon-extra-heart'
              } else {
                json[i].no = 'mui-icon-extra mui-icon-extra-heart-filled'
              }
            }
            that.list_con = json
            that.conclass = that.nav_list_two[0].type;
            console.log(that.conclass, 'list_con')
          })
        }
      });


    },
    components: {
      Header
    }
  }
</script>


<style lang="less" scoped>
  @import "../../../static/pxvalue.less";
  @import "../../assets/less/index/modular.less";
</style>
